<template>
  <div>
    <el-dropdown trigger="click" placement="bottom" size="mini">
      <span class="el-dropdown-link">
        <i style="color:#a6a6ae;cursor:pointer;font-size:14px" class="V7_iconfont V7_iconV7tubiao_heimingdan"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="openIp('', 'visitor')">拉黑访客</el-dropdown-item>
        <!-- <el-dropdown-item @click.native="openIp('', 'ip')" v-if="['pc', 'sdk', 'wxsdk', 'wap'].includes(webchatInfo.platform)">拉黑访客IP</el-dropdown-item> -->
      </el-dropdown-menu>
    </el-dropdown>
    <el-dialog :visible.sync="visible" :before-close="closeIp" class="formRef" width="500px" :close-on-click-modal="false">
      <span slot="title" style="color:#303753;font-size:14px;font-weight:600">{{ title }}</span>
      <el-alert title="拉黑后系统将自动关闭会话，系统将不会接收此访客消息" type="warning" show-icon :closable="false" style="line-height:18px"></el-alert>
      <el-input
        type="textarea"
        style="margin-top:24px"
        :autosize="{ minRows: 4}"
        placeholder="请输入拉黑原因"
        v-model="reason"
        ref="reasonInput">
      </el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeIp">取 消</el-button>
        <el-button type="primary" @click="submitIp" :disabled="reason.length === 0">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
/**
 * 拉黑访客组件
 */
import { Component, Vue, Ref, Prop } from 'vue-property-decorator';
import { formatStamp, commonAction } from '@/utils/common'
import { WebchatModule } from '@/store/modules/webchat'
@Component({
  name: 'BlackDialog'
})
export default class BlackDialog extends Vue {
  [x: string]: any
  @Prop() private webchatInfo: any
  @Ref() private readonly reasonInput: any
  private visible: boolean = false
  private title = '拉黑访客'
  private reason = ''
  private blackType = ''

  private openIp (data: any, type: string) {
    if (type === 'visitor') {
      this.title = '拉黑访客'
      this.blackType = 'visitorId'
    } else {
      this.title = '拉黑访客IP'
      this.blackType = 'ip'
    }
    this.visible = true
    this.$nextTick(() => {
      this.reasonInput.$el.querySelector('textarea').focus()
    })
  }

  private closeIp () {
    this.reason = ''
    this.visible = false
  }

  private async submitIp () {
    if (!this.reason) {
      this.$message.error('请填写拉黑原因')
      return
    }
    const data = {
      blackType: this.blackType,
      visitorName: this.webchatInfo.visitorName,
      visitorId: this.webchatInfo.visitorId,
      sessionId: this.webchatInfo.sessionId,
      ip: this.webchatInfo.ip,
      blackReason: this.reason
    }
    const params = { url: '/im-center/action/blacklist/blockVisitor', method: 'POST', data }
    const result: any = await commonAction(params)
    if (result.success) {
      const actionData = { url: '/im-center/action/webchat/blackListfinishWebchatSession', method: 'POST', data: { _id: this.webchatInfo._id } }
      WebchatModule.webchatCommonAction(actionData).then(res => {
        if (res) {
          WebchatModule.CLOSE_WEBCHAT_SESSION({ type: 'webchat_todo', id: this.webchatInfo._id })
          this.$message.success(`${formatStamp(Date.now())} 访客已被拉黑`)
          this.closeIp()
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.formRef
  >>> .el-dialog__body
        padding: 10px 24px 24px 24px
  >>> .el-dialog__headerbtn
        top 28px
</style>
